<template>
<el-dialog
  title="选择支付方式"
  :visible.sync="dialogVisible"
  width="640px"
  :before-close="handleClose">
  <div class="my-dialog">
    <div class="tip tac">
      <i class="el-icon-success success mgr2"></i>
      <span class="success">订单提交成功</span>
    </div>
    <div class="flex jc-between info">
      <p class="info-item">订单关闭：<span class="primary">2</span>小时后</p>
      <p class="info-item">作品数：<span class="primary">{{info.panocount}}</span>组</p>
    </div>
    <div class="flex jc-between info">
      <p class="info-item">订单号：<span class="primary">{{info.orderno}}</span></p>
      <p class="info-item">支付金额：<span class="danger">¥ {{info.totalprice}}</span></p>
    </div>
    <div class="tac mode">
      <el-button class="fs-b" @click="pay(1)"><i class="iconfont icon-z-alipay primary fs-l"></i> 支付宝</el-button>
      <el-button class="fs-b" @click="pay(2)"><i class="iconfont icon-weixin success fs-l"></i> 微信支付</el-button>
      <el-button class="fs-b" @click="pay(3)"><i class="iconfont icon-jiaoyi success fs-l"></i> 余额支付</el-button>
    </div>

  </div>
</el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      info: {},
      desc: ['', '支付宝支付', '微信支付', '余额支付'],
      userUrl: $globalconfig.URLS.USER,
    }
  },
  methods: {
    pay(id) {
      this.$vgo.open(() => {
        let return_url = `${this.userUrl}#/smart-city/my-order`;
        let data = {
          ordertype: 9,
          paytype: id,
          productid: this.info.id,
          return_url: encodeURIComponent(return_url)
        };
        this.$api.modePay(data).then(res => {
          console.log(res)
          if (res.code == 100) {
            if (res.data) {
              location.href = res.data
            } else {
              //若为余额支付则支付成功后直接跳转
              location.href = return_url
            }
          }
        })
      }, `确定使用【${this.desc[id]}】吗？`, '支付提示')
      
    },
    openDialog(obj) {
      this.info = obj.data
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
      this.clean()
    },
    clean() {
      this.info = {}
    }
  }
}
</script>

<style lang="stylus" scoped>
.my-dialog
  min-height 400px
  padding 0 20px
  .tip
    height 40px
    line-height 40px
    i.el-icon-success
      font-size 40px
      vertical-align bottom
  .info
    margin-top 20px
    .info-item
      width 50%
  .mode
    margin-top 70px
</style>